<!DOCTYPE html>
<html lang="en" xmlns:th="http://www.thymeleaf.org">
<head>
  <meta charset="UTF-8">
  <title>Title</title>


  <!--bootstrap3-->
  <link rel="stylesheet" href="/css/bootstrap.min.css">
  <link rel="stylesheet" href="/plugins/bootstraptable/bootstrap-table.min.css">
  <link rel="stylesheet" href="/css/style.css">
  <!--    <link rel="stylesheet" href="/css/message.css">-->


</head>
<body>

<div class="header">
  <div class="panel panel-primary">
    <div class="panel-heading">
      <h1 class="panel-title">学生信息</h1>
    </div>
    <div class="panel-body">
<!--      <div style="display:inline-block;">-->

        <div style="float:left;padding:6px;">
          <span>姓名：</span>
        </div>
        <div style="float:left;">
          <input id="searchName" class="form-control" style="width:200px;" placeholder="请输入姓名" />
        </div>
        <div style="float:left;padding:6px;">
          <span>性别：</span>
        </div>
        <div style="float:left;">
          <select id="gender" class="form-control" style="width:87px;">
            <option value="">请选择</option>
            <option value="男">男</option>
            <option value="女">女</option>
          </select>
        </div>
        <div style="float:left;margin-left:20px;">
          <button id="query" class="btn btn-primary" onclick="search();">
                        <span class="glyphicon glyphicon-search">
		                </span> 查询
          </button>
          <button id="refresh" class="btn btn-default" onclick="resetList();">
                        <span class="glyphicon glyphicon-refresh">
		                </span> 刷新
          </button>
          <!-- Button trigger modal -->
          <!--          <button type="button" class="btn btn-primary" data-toggle="modal" data-target="#myModal" onclick="preAdd();">-->
          <!--                        <span class="glyphicon glyphicon-plus">-->
          <!--                        </span>新增-->
          <!--          </button>-->
          <!--          <button type="button" class="btn btn-danger"   onclick="batchDelete();">-->
          <!--                        <span class="glyphicon glyphicon-trash">-->
          <!--                        </span>批量删除-->
          <!--          </button>-->
          <!--          <button type="button" id="upload" class="btn btn-info">-->
          <!--            批量导入-->
          <!--          </button>-->

        </div>
<!--      </div>-->
    </div>
  </div>
</div>

<div class="box1">
  <table class="table table-bordered table-striped table-sm table-dark" id="stuTable"></table>
</div>


<!--批量导入模态框-->
<!--批量导入操作-->
<!-- 模态框（Modal） -->

<div class="modal fade" id="Modal" tabindex="-1" role="dialog" aria-labelledby="ModalLabel" aria-hidden="true">
  <div class="modal-dialog">
    <div class="modal-content">
      <div class="modal-header">
        <button type="button" class="close" data-dismiss="modal" aria-hidden="true">&times;</button>
        <h4 class="modal-title" id="ModalLabel">文件上传</h4>
      </div>
      <div class="modal-body">
        <input id="f_upload" type="file"  name="file"/>
      </div>

    </div>
  </div>
</div>


<!--&lt;!&ndash; 学生Modal &ndash;&gt;-->
<!--<div class="modal fade" id="myModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel">-->
<!--  <div class="modal-dialog" role="document">-->
<!--    <div class="modal-content">-->
<!--      <div class="modal-header">-->
<!--        <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">&times;</span></button>-->
<!--        <h4 class="modal-title" id="myModalLabel">学生信息</h4>-->
<!--      </div>-->
<!--      <div class="modal-body">-->
<!--        <form id="formStudent">-->
<!--          <input hidden="hidden" id="id" name="id">-->
<!--          <div class="form-group">-->
<!--            <label for="sno">学号</label>-->
<!--            <input type="text" class="form-control" id="sno" aria-describedby="emailHelp" placeholder="Enter sno" name="sno">-->
<!--          </div>-->
<!--          <div class="form-group">-->
<!--            <label for="sname">姓名</label>-->
<!--            <input type="text" class="form-control" id="sname" aria-describedby="emailHelp" placeholder="Enter sname" name="sname">-->
<!--          </div>-->

<!--          <div class="form-group">-->
<!--            <label for="sex">性别</label>-->
<!--            <select class="form-control" id="sex" name="sex">-->
<!--              <option value="男">男</option>-->
<!--              <option value="女">女</option>-->
<!--            </select>-->
<!--          </div>-->

<!--          <div class="form-group">-->
<!--            <label for="sage">年龄</label>-->
<!--            <input type="text" class="form-control" id="sage" aria-describedby="emailHelp" placeholder="Enter sage" name="sage">-->
<!--          </div>-->

<!--          <div class="form-group">-->
<!--            <label for="password">密码</label>-->
<!--            <input type="text" class="form-control" id="password" aria-describedby="emailHelp" placeholder="Enter password" name="password">-->
<!--          </div>-->

<!--          <div class="form-group">-->
<!--            <label for="classid">班级号</label>-->
<!--            <input type="text" class="form-control" id="classid" aria-describedby="emailHelp" placeholder="Enter classid" name="classid">-->
<!--          </div>-->

<!--          <div class="form-group">-->
<!--            <label for="gradeid">年级号</label>-->
<!--            <input type="text" class="form-control" id="gradeid" aria-describedby="emailHelp" placeholder="Enter gradeid" name="gradeid">-->
<!--          </div>-->

<!--          <div class="form-group">-->
<!--            <label for="mid">专业编号</label>-->
<!--            <input type="text" class="form-control" id="mid" aria-describedby="emailHelp" placeholder="Enter mid" name="mid">-->
<!--          </div>-->

<!--        </form>-->
<!--      </div>-->
<!--      <div class="modal-footer">-->
<!--        <button type="button" class="btn btn-default" data-dismiss="modal">取消</button>-->
<!--        <button type="button" class="btn btn-primary" onclick="saveStudent();">-->
<!--          <span class="glyphicon glyphicon-floppy-save"></span>-->
<!--          保存-->
<!--        </button>-->
<!--      </div>-->
<!--    </div>-->
<!--  </div>-->
<!--</div>-->



<!--学生详情-->
<div class="modal fade" tabindex="-1" role="dialog" id="detailModal">
  <div class="modal-dialog" role="document">
    <div class="modal-content">
      <div class="modal-header">
        <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">&times;</span></button>
        <h4 class="modal-title">学生详情</h4>
      </div>
      <div class="modal-body">

        <table class="table11_6">
          <tr>
            <td> <span>学号：</span> </td>
            <td>
              <input type="text" class="form-control form1" id="sno" aria-describedby="emailHelp" placeholder="Enter sno" name="sno" readonly="readonly">
            </td>
          </tr>
          <tr>
            <td> <span>姓名：</span></td>
            <td>
              <input type="text" class="form-control form1" id="sname" aria-describedby="emailHelp" placeholder="Enter sname" name="sname"  readonly="readonly">
            </td>

          </tr>
          <tr>
            <td> <span>性别：</span></td>
            <td>
              <input type="text" class="form-control form1" id="sex" aria-describedby="emailHelp" placeholder="Enter sex" name="sex"  readonly="readonly">
            </td>
          </tr>
          <tr>
            <td> <span>年龄：</span></td>
            <td> <input type="text" class="form-control form1" id="sage" aria-describedby="emailHelp" placeholder="Enter sage" name="sage"  readonly="readonly"></td>
          </tr>

          <tr>
            <td> <span>班级号：</span></td>
            <td> <input type="text" class="form-control form1" id="classid" aria-describedby="emailHelp" placeholder="Enter classid" name="classid"  readonly="readonly"></td>
          </tr>
          <tr>
            <td> <span>年级号：</span></td>
            <td> <input type="text" class="form-control form1" id="gradeid" aria-describedby="emailHelp" placeholder="Enter gradeid" name="gradeid"  readonly="readonly"></td>
          </tr>
          <tr>
            <td><span>专业编号：</span></td>
            <td> <input type="text" class="form-control form1" id="mid" aria-describedby="emailHelp" placeholder="Enter mid" name="mid"  readonly="readonly"></td>
          </tr>

<!--          <tr>-->
<!--            <td> <span>院系编号：</span></td>-->
<!--            <td> <input type="text" class="form-control form1" id="deptid" aria-describedby="emailHelp" placeholder="Enter deptid" name="deptid"  readonly="readonly"></td>-->
<!--          </tr>-->

        </table>


        <!--        <form id="formStudent">-->
        <!--          <input hidden="hidden" id="id" name="id">-->
        <!--          <div class="form-group">-->
        <!--            <span>学号：</span>-->
        <!--            <input type="text" class="form-control" id="sno" aria-describedby="emailHelp" placeholder="Enter sno" name="sno" readonly="readonly">-->
        <!--          </div>-->
        <!--          <div class="form-group">-->
        <!--            <span>姓名：</span>-->
        <!--            <input type="text" class="form-control" id="sname" aria-describedby="emailHelp" placeholder="Enter sname" name="sname"  readonly="readonly">-->
        <!--          </div>-->

        <!--          <div class="form-group">-->
        <!--            <span>性别：</span>-->
        <!--            <input type="text" class="form-control" id="sex" aria-describedby="emailHelp" placeholder="Enter sex" name="sex"  readonly="readonly">-->
        <!--&lt;!&ndash;            <select class="form-control" id="sex" name="sex">&ndash;&gt;-->
        <!--&lt;!&ndash;              <option value="男">男</option>&ndash;&gt;-->
        <!--&lt;!&ndash;              <option value="女">女</option>&ndash;&gt;-->
        <!--&lt;!&ndash;            </select>&ndash;&gt;-->
        <!--          </div>-->

        <!--          <div class="form-group">-->
        <!--            <span>年龄：</span>-->
        <!--            <input type="text" class="form-control" id="sage" aria-describedby="emailHelp" placeholder="Enter sage" name="sage"  readonly="readonly">-->
        <!--          </div>-->

        <!--          <div class="form-group">-->
        <!--            <span>密码：</span>-->
        <!--            <input type="text" class="form-control" id="password" aria-describedby="emailHelp" placeholder="Enter password" name="password"  readonly="readonly">-->
        <!--          </div>-->

        <!--          <div class="form-group">-->
        <!--            <span>班级号：</span>-->
        <!--            <input type="text" class="form-control" id="classid" aria-describedby="emailHelp" placeholder="Enter classid" name="classid"  readonly="readonly">-->
        <!--          </div>-->

        <!--          <div class="form-group">-->
        <!--            <span>年级号：</span>-->
        <!--            <input type="text" class="form-control" id="gradeid" aria-describedby="emailHelp" placeholder="Enter gradeid" name="gradeid"  readonly="readonly">-->
        <!--          </div>-->

        <!--          <div class="form-group">-->
        <!--            <span>专业编号：</span>-->
        <!--            <input type="text" class="form-control" id="mid" aria-describedby="emailHelp" placeholder="Enter mid" name="mid"  readonly="readonly">-->
        <!--          </div>-->

        <!--        </form>-->

      </div>
      <div class="modal-footer">
        <button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
        <!--        <button type="button" class="btn btn-primary">Save changes</button>-->
      </div>
    </div><!-- /.modal-content -->
  </div><!-- /.modal-dialog -->
</div><!-- /.modal -->


<script src="/js/jquery-3.4.1.min.js"></script>
<script src="/plugins/bootstraptable/bootstrap-table.min.js"></script>
<script src="/js/bootstrap.min.js"></script>
<script src="/plugins/bootstraptable/locale/bootstrap-table-zh-CN.min.js"></script>
<script src="/js/upload.js"></script>
<script src="/js/fileinput.min.js"></script>
<!--  <script src="/js/message.js"></script>-->
<script src="/js/msg.js"></script>
<script>

  /**
   * 显示学生列表
   */
  function loadTable(){
    $("#stuTable").bootstrapTable({
      url: '/webapi/student/getbypage1',
      striped:true, //设置为ture有隔行变色效果
      pagination:true,//设置为true会在底部显示分页条
      singleSelect: false,//设置为true将禁止多选
      pageSize:8,   //设置分页的每页条数
      pageList:[8],
      pageNumber:1, //设置了分页，首页页码
      uniqueId : "id", //每一行的唯一标识，一般为主键列
      clickToSelect: true,
      sortName: "id",
      sortOrder: "asc",
      onSort:function (name,order){

        console.log(name);
        console.log(order);
      },
      sidePagination: "server", //设置在哪里进行分页，可选值为"client"或者
      queryParams:function (params){
        let paraObj = {
          size: params.limit,
          page: params.offset/params.limit,
          sort: params.sort,
          direct: params.order,
          sname:$("#searchName").val(),
          sex: $("#gender").val()
        };
        return paraObj;
      },
      /**
       * onClickCell: 单击单元格触发
       * field    点击单元格的字段名称
       * value    点击单元格的数据值
       * row      点击列的整行数据
       * $element 当前点击td的Dom元素
       */
      onClickCell:function (field,value,row,$element){
        $element.attr('contenteditable', true);
        //元素失去焦点事件
        $element.blur(function() {
          //单元格修改后的的值
          let tdValue = $element.html();
          let index = $element.parent().data('index');

          //updateCell更新某单元格数据
          $("#stuTable").bootstrapTable('updateCell', {
            index: index,       //行索引
            field: field,       //列名
            value: tdValue        //cell值
          })

          $.ajax ({

            url:"/webapi/student/update",
            method:"put",
            data: row

          }).done(function (rs) {
            console.log(rs)
            if (rs.code == 200){
              $('#stuTable').bootstrapTable('destroy');
              loadTable();
              message.showText("success","更新成功")
            }
          });
          console.log(field);
          console.log(tdValue);
          console.log(row);
        })
      },
      onLoadError:function (rs){
        console.log(rs)
        if (rs.code == 403){
          window.location.href = "../../templates/login/user.html"
        }
      },
      responseHandler:function (res){
        console.log(res.data)
        return {
          "total": res.data.total, // 总页数
          "rows": res.data.rows    // 数据
        }
      },
      columns:[{
        sortable: true,
        align: "center",
        field: "id",
        title: "序号"
      },{
        sortable: true,
        align: "center",
        field: "sno",
        title: "学号"
      },{
        sortable: true,
        align: "center",
        field: "sname",
        title: "姓名"
      },{
        sortable: true,
        align: "center",
        field: "sex",
        title: "性别"
      },{
        sortable: true,
        align: "center",
        field: "sage",
        title: "年龄"
      },{
        sortable: true,
        align: "center",
        field: "classid",
        title: "班级号"
      },{
        sortable: true,
        align: "center",
        field: "gradeid",
        title: "年级号"
      },{
        sortable: true,
        align: "center",
        field: "mid",
        title: "专业编号"
      },{
        field: "id",
        title: '操作',
        align: 'center',
        formatter: function(value,row,index){
          let e = "<button id='look' class='btn btn-info btn-xs' style='width: 60px;height: 30px' onclick='queryStudent("+row.id+");'>" +
                  "详情</button> "
          // let e = "<a href='#' style='text-decoration: none;color: #0c4128' onclick='editStudent("+row.id+");'>编辑</a> "
          // let d = "<a href='#' style='text-decoration: none;color: #0c4128' onclick='deleteStudent("+row.id+")'>删除</a>"
          // let e = "<button  class='btn btn-primary btn-xs' style='width: 60px;height: 30px' onclick='editStudent("+row.id+");'>" +
          //         "<span class='glyphicon glyphicon-edit'></span>编辑</button> "
          // let d = "<button  class='btn btn-danger btn-xs' style='width: 60px;height: 30px' onclick='deleteStudent("+row.id+")'>" +
          //         "<span class='glyphicon glyphicon-trash'></span>删除</button>"
          return e ;
        },width:250 //自定义修改，增加修改、删除标志
      }],
      formatNoMatches: function (){
        return "没有相关的匹配结果";
      },
      formatLoadingMessage:function (){
        return "请稍等，正在加载中...";
      }
    })
  }

  function queryStudent(id){
    //查看按钮 显示模态框
    $("#detailModal").modal("show");
    // let rows = $("#stuTable").bootstrapTable("getSelections");
    // let toId = $("#id").val();
    // console.log(toId);
    // let rows = $("#stuTable").bootstrapTable('getRowByUniqueId',id);
    // console.log(rows);
    // $("#sno").val(rows.sno);
    // $("#sname").val(rows.sname);
    // $("#sex").val(rows.sex);
    // $("#sage").val(rows.sage);
    // $("#password").val("");
    // $("#classid").val(rows.classid);
    // $("#gradeid").val(rows.gradeid);
    // $("#mid").val(rows.mid);

    $.ajax({
      url:'/webapi/student/get/'+id
    }).done(function (rs){
      console.log(rs)
      if (rs.code === 200){
        let data = rs.data
        $("#id").val(data.id);
        $("#sno").val(data.sno);
        $("#sname").val(data.sname);
        $("#sex").val(data.sex);
        $("#sage").val(data.sage);
        $("#classid").val(data.classid);
        $("#gradeid").val(data.gradeid);
        $("#mid").val(data.mid);
      }
    })
  }
  // /**
  //  * 批量删除
  //  */
  // function batchDelete(){
  //   let rows = $("#stuTable").bootstrapTable("getSelections");
  //   let len = rows.length;
  //   if(len == 0){
  //     message.showText("error","请选择要删除的行")
  //   }else{
  //     if(confirm("你确定删除"+len+"条内容吗？")){
  //       let arr = [];
  //       for (let i = 0;i < len;i++){
  //         arr.push(rows[i].id);
  //       }
  //       $.ajax({
  //         url: '/webapi/student/batchdelete/'+arr,
  //         method: 'delete'
  //       }).done(function (rs){
  //         if (rs.code == 200){
  //           $("#stuTable").bootstrapTable("destroy");
  //           loadTable();
  //           message.showText("success","删除成功")
  //         }
  //
  //       })
  //     };
  //
  //
  //   }
  //
  // }
  //
  // /**
  //  * 删除学生
  //  */
  // function deleteStudent(id){
  //   if(confirm("您是否真的要删除该记录?")){
  //     $.ajax({
  //       url: '/webapi/student/delete/'+id,
  //       method: 'delete'
  //     }).done(function (rs){
  //       if (rs.code == 200){
  //         $("#stuTable").bootstrapTable("destroy");
  //         loadTable();
  //         message.showText("success","删除成功")
  //       }
  //
  //     })
  //   }
  //
  // }
  //
  // /**
  //  * 点击新增时给id赋值，以便判断做新增操作
  //  */
  // function preAdd(){
  //   $("#id").val(0);
  //   $("#sno").val("");
  //   $("#sname").val("");
  //   $("#sex").val("");
  //   $("#sage").val("");
  //   $("#password").val("");
  //   $("#classid").val("");
  //   $("#gradeid").val("");
  //   $("#mid").val("");
  // }
  //
  // // 修改之前获取学生信息
  // function editStudent(id){
  //   $('#myModal').modal('show')
  //   $.ajax({
  //     url:'/webapi/student/get/'+id
  //   }).done(function (rs){
  //     console.log(rs)
  //     if (rs.code == 200){
  //       let data = rs.data
  //       $("#id").val(data.id);
  //       $("#sno").val(data.sno);
  //       $("#sname").val(data.sname);
  //       $("#sex").val(data.sex);
  //       $("#sage").val(data.sage);
  //       $("#password").val("");
  //       $("#classid").val(data.classid);
  //       $("#gradeid").val(data.gradeid);
  //       $("#mid").val(data.mid);
  //     }
  //   })
  // }
  //
  // /**
  //  * 根据id判断是新增还是更新，判断之后做新增和更新操作
  //  */
  // function saveStudent(){
  //   let data = $("#formStudent").serialize();
  //   let id = $("#id").val();
  //   if (id < 1){
  //     //是新增
  //     $.ajax ({
  //       url:"/webapi/student/insert",
  //       method:"post",
  //       data:data
  //     }).done(function (rs) {
  //       console.log(rs)
  //       if (rs.code == 200){
  //         $('#stuTable').bootstrapTable('destroy');
  //         loadTable();
  //         $('#myModal').modal('hide');
  //         message.showText("success","添加成功")
  //       }
  //
  //     });
  //   } else {
  //
  //     //是更新
  //     $.ajax ({
  //
  //       url:"/webapi/student/update",
  //       method:"put",
  //       data:data
  //
  //     }).done(function (rs) {
  //       if (rs.code == 200){
  //         $('#stuTable').bootstrapTable('destroy');
  //         loadTable();
  //         $('#myModal').modal('hide');
  //         message.showText("success","更新成功")
  //       }
  //     });
  //   }
  // }

  /**
   * 刷新数据
   */
  function resetList(){
    $("#searchName").val("");
    $("#gender").val("");
    $('#stuTable').bootstrapTable("destroy");
    loadTable();
    message.showText("success","刷新成功")
  }
  function search(){
    $("#stuTable").bootstrapTable("destroy");
    loadTable();
  }

  $(function (){
    loadTable()
  })

  // 引用后需要初始化，解决IE8以上浏览器不支持JS的h5新属性classList
  // $(function(){
  //     message.classList()
  // })

</script>

</body>
</html>